<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
  <title>Document</title>
  <style>
    .swiper{
      /* width: 600px; */
      height: 500px;
      border: 1px solid red;
    }
    .swiper-slide{
      background-color: antiquewhite;
      /* border: 1px solid red; */
    }
  </style>
</head>
<body>
  <script src="./dist/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
  <div class="swiper-container swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>
  <script>

  //   var $box = $('#box');
  //   var vul = $box.text();
  //   var i = 0;
  //   $box.click(function(){
  //   $box.text(0);
  //   setTimeout(add,1000);
  //   function add(){
  //   $box.text(i);
  //    i++;
  //    if(i<=0){
  //      setTimeout(function(){
  //        add(i);
  //      },1000);
  //    }else if(361>i){
  //     setTimeout(function(){
  //        add(i);
  //      },1);
  //    }
  // }
  // });
  // $box.click(function(){
  //   $box.text(0);
  //   setTimeout(add,1000);
  //   function add(){
  //   $box.text(i);
  //    i++;
  //    if(316>i){
  //      setTimeout(function(){
  //        add(i);
  //      },1);
  //    }
  // }
  // });

// function sleep (time = 0) {
//   return new Promise((resolve, reject) => {
//     setTimeout(() => {
//       resolve();
//     }, time);
//   })
// }

// (async () => {
//   console.log("开始")

//   await sleep(1000)
//   console.log("第一次延迟")
// })()

// var promise = new Promise(function(resolve, reject){
//     console.log('............');
//     resolve(); // 这是promise的一个机制，只有promise实例的状态变为resolved，才会会触发then回调函数
// });

// promise.then(function(){
//     for(var i=0;i<100;i++) {
//         console.log('c')
//     }    
// })
// .then(function(){
//     console.log('b')
// })
// .then(function(){
//     console.log('a')
// })
  </script>
  <script>        
    // var mySwiper = new Swiper ('.swiper-container', {
    //   // direction: 'vertical', // 垂直切换选项
    //   loop: true, // 循环模式选项
    //   slidesPerView:1,
    //   // 如果需要分页器
    //   pagination: {
    //     el: '.swiper-pagination',
    //   },
      
    //   // 如果需要前进后退按钮
    //   navigation: {
    //     nextEl: '.swiper-button-next',
    //     prevEl: '.swiper-button-prev',
    //   },
      
      // 如果需要滚动条
      // scrollbar: {
      //   el: '.swiper-scrollbar',
      // },
    })        
    </script>
</body>
</html>